<!--@author vidy3587@gmail.com-->
<template>
  <div class="short-video-page with-padding-bottom">
    <div class="with-banner">
      <div class="title-bar card-title">
        获奖公示
      </div>
      <div class="top-3">
        <div class="top-3-card row" v-for="item in top3" :key="item.number">
          <div class="img-box">
            <img :src="item.image" alt="">
          </div>
          <div class="col-1 card-info">
            <div class="number">{{item.number}}号</div>
            <div class="work-name ellipsis">{{item.workName}}</div>
            <div class="award ellipsis">{{item.award}}</div>
          </div>
          <div class="medal-box">
              <div>
                第<span class="rank-color">{{item.rank}}</span>名
              </div>
              <div class="medal">
              </div>
          </div>
        </div>

      </div>
      <div class="other-list">
        <div class="rank-table">
          <div class="rank-table-header row vertical-middle horizontal-middle">
            优秀奖
          </div>
          <div class="rank-list">
            <div class="rank-item row vertical-middle" v-for="item in others" :key="item.workNumber">
              <div class="table-col ellipsis">{{ item.rank }}</div>
              <div class="table-col col-1 ellipsis">{{ item.workName }}</div>
              <div class="table-col ellipsis">{{ item.ticketNum }}</div>
            </div>
            <div class="text-center tips">获得一张通用剧本杀体验券及戏度周边礼品</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: "index.vue",
  data() {
    return {
      list: [
        {img:"", number:1,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:1, ticketNum: 100},
        {img:"", number:2,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:2, ticketNum: 100},
        {img:"", number:3,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:3, ticketNum: 100},
        {img:"", number:4,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:4, ticketNum: 100},
        {img:"", number:5,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:5, ticketNum: 100},
        {img:"", number:6,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:6,ticketNum: 100},
        {img:"", number:7,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:7,ticketNum: 100},
        {img:"", number:8,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:8,ticketNum: 100},
        {img:"", number:9,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:9,ticketNum: 100},
        {img:"", number:10,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:10,ticketNum: 100},
        {img:"", number:11,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:11,ticketNum: 100},
        {img:"", number:12,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:12,ticketNum: 100},
        {img:"", number:13,workName: '风怒可爱的小鸟',award: '奖励switch一台', rank:13,ticketNum: 100},
      ]
    }
  },
  computed: {
    top3 () {
      return this.list.slice(0,3)
    },
    others() {
      return this.list.slice(3,this.list.length)
    }
  }
}
</script>

<style scoped lang="scss">
.top-3 {
  width: px2rem(634px);
  margin: 0 auto;
}

.top-3-card {
  background-image: linear-gradient(180deg, #4207B4 21%, #0F30DD 81%);
  border-radius: px2rem(20px);
  width: 100%;
  height: px2rem(200px);
  margin-bottom: px2rem(20px);
  padding: px2rem(20px);
  box-sizing: border-box;
}

.img-box {
  width: px2rem(251px);
  height: px2rem(161px);
  background: #272c74;
  border-radius: px2rem(5px);
  overflow: hidden;
  img {
    width: px2rem(251px);
    height: px2rem(161px);
    border: none;
    outline: none;
    background: #272c74;
  }
}
.top-3 {
  color: $lightFontColor;
  .top-3-card:nth-child(1) {
    .medal {
      @include withBg("~@/assets/medal_1.png", px2rem(60px), px2rem(118px));
    }

  }
  .top-3-card:nth-child(2) {
    .medal {
      @include withBg("~@/assets/medal_2.png", px2rem(60px), px2rem(118px));
    }

  }
  .top-3-card:nth-child(3) {
    .medal {
      @include withBg("~@/assets/medal_3.png", px2rem(60px), px2rem(118px));
    }

  }
}
.medal {
  margin-top: px2rem(11px);
  width: px2rem(60px);
  height: px2rem(118px);

}

.card-info {

  font-size: px2rem(24px);
  margin-left: px2rem(27px);
}
.work-name {
  margin-top: px2rem(13px);
  margin-bottom: px2rem(23px);
}
.award {
  font-size: px2rem(30px);
  color: #FFE18A;
  text-align:left;
}

.medal-box {
  font-size: px2rem(24px);
  .rank-color {
    color: $warmColor;
  }
}

.other-list {
  @include withBg("~@/assets/short_video_rule_bg.png", px2rem(725px), px2rem(1274px), px2rem(25px), top);
  width: 100%;
  min-height: px2rem(1274px);
  padding-top: px2rem(28px);
}
.rank-table-header {
  margin-bottom: px2rem(10px);
}

.tips {
  margin-top: px2rem(53px);
  font-size: px2rem(28.8px);
  color: #FFE18A;
}
</style>